<!doctype html>
<html>
<head>
  <title>Test ALL Playing Card Elements</title>
  <script src="polymer-all/polymer/polymer.js"></script>  
  <link rel="stylesheet" href="polymer-all/polymer-ui-elements/basic.css">
  <link rel="import" href="card-element.html">
  <style>
  html, body {
    margin: 0;
    width:100%;
    height:100%
    margin:0;
    background-color:green;
  }

  #testarea {
    width:100%;
    height:100%;
    padding:30px;
  }

  html, body {
    width:100%;
    height:100%;
  }
  </style>
</head>
<body>
<element name="all-cards">
  <template>
    <style>
      card-tester::x-card,
      card-card,
      #card {
      height:{{cardheight}}px;
      width:{{cardwidth}}px;
      font-size:{{fontsize}}px;
      }
    </style>
      <div id="cardholder">
    <content select="card-card">
    <template repeat="{{cards}}">
      <card-card value="{{value}}" suit="{{suit}}" faceup="{{faceup}}" pseudo="x-card"></card-card>
    </template>
    </content>
    </div>
  </template>
  <script>
    var SUITS = ['clubs', 'spades', 'hearts', 'diamonds'];
    Polymer.register(this, {
        suit: 'clubs',
        cardheight:200,
        cardwidth:144,
        cards:[],
        inserted: function() {
            var cards = [];
            SUITS.forEach(function(suit) {
                for (var i = 0; i < 14; ++i) {
                    var c = new Card();
                    c.value = i;
                    c.suit = suit;
                    cards.push(c);
                }
            });
            this.cards = cards;
        }
    });
  </script>
</element>
<div id="testarea">
  <all-cards id="allcards"></all-cards>
</div>
<script>
window.addEventListener('WebComponentsReady', function () {
var allcards = document.getElementById('allcards');
});
</script>
</body>
</html>
